import React from "react";
import PropTypes from "prop-types";
import ProjectIcon from "components/ProjectIcon";
import styles from "./FileItem.less";

const FileItem = ({
  fileMessage,
  serviceType,
}) => {
  const { fileName } = fileMessage;

  const onDownload = (file) => {
    const a = document.createElement("a");
    a.href = `/flow-platform/oss/downloadFile?attachId=${file?.attachId}&fileName=${fileName}&serviceType=${serviceType}`;
    a.setAttribute("download", fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  return (
    <div className={styles.root} style={{width: serviceType=== '0'? '30%' : '50%'}}>
      <div className={styles.fileMessage}>
        <div className={styles.fileText}>
          <span>{fileName}</span>
        </div>
        <div>
          <ProjectIcon
            type="iconxiazai"
            className={styles.icon}
            onClick={() => onDownload(fileMessage)}
          />
        </div>
      </div>
    </div>
  );
};

FileItem.propTypes = {
  fileMessage: PropTypes.object,
};

FileItem.defaultProps = {
  fileMessage: {},
};

export default FileItem;
